<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入bootstrap样式 -->
		<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
		<!-- 引入bootstrap-table样式 -->
		<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
		<!-- jquery -->
		<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
		<!-- bootstrap-table.min.js -->
		<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
		<!-- 引入中文语言包 -->
		<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="../js/ajax.js"></script>
		<style type="text/css">
			table thead tr th {
				text-align: center;
			}

			div.center {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div style="padding:20px;" id="app">
			<div style="margin-top: 10px; margin-left: 10px">
				<form class="form-inline" method="post" onsubmit="return false;">
					<div class="form-group">
						<label for="name">学生姓名:</label>
						<input type="text" v-model="formName" class="form-control">
					</div>
					<div class="form-group">
						<label for="age">年龄:</label>
						<input type="text" v-model="formAgeOne" style="width: 60px;" class="form-control"> ——
						<input type="text" v-model="formAgeTwo" style="width: 60px;" class="form-control">
					</div>
					<div class="form-group">
						<label for="ip">学院:</label>
						<select class="form-control" style="width: 180px;" v-model="selectVal">
							<option value="">请选择</option>
							<option v-for="item in memList" :value="item.mid">{{item.mdep}}</option>
						</select>
					</div>
					<div class="form-group">
						<button class="btn btn-primary" @click="getStudentList">
							搜索
						</button>
						<button class="btn btn-primary" @click="clear">
							添加
						</button>
						<button class="btn btn-primary" @click="getStuIn">
							导出
						</button>
					</div>
				</form>
			</div>
			<div class="panel panel-primary">
				<div class="panel-heading">学生管理</div>
				<table class="table table-bordered table-striped text-center">
					<thead>
						<tr>
							<th>选择</th>
							<th>用户名</th>
							<th>年龄</th>
							<th>性别</th>
							<th>学院</th>
							<th>备注</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<template v-for="row in dataList">
							<tr>
								<td><input type="checkbox"/></td>
								<td>{{row.name}}</td>
								<td>{{row.age}}</td>
								<td>{{row.sex}}</td>
								<td>{{row.m.mdep}}</td>
								<td>{{row.record}}</td>
								<td><a href="#" @click="Edit(row)" class="btn btn-info">编辑</a>&nbsp;&nbsp;<a href="#" class="btn btn-danger"
									 @click="Delete(row.id)">删除</a></td>
							</tr>
						</template>
						<tr v-if="isShow">
							<td><input type="text" class="form-control" v-model="rowtemplate.name" /></td>
							<td><input type="text" class="form-control" v-model="rowtemplate.age" /></td>
							<td>
								<select class="form-control" v-model="rowtemplate.sex">
									<option value=""></option>
									<option value="男">男</option>
									<option value="女">女</option>
								</select>
							</td>

							<td>
								<select class="form-control" v-model="rowtemplate.mid">
									<option value=""></option>
									<option v-for="item in memList" :value="item.mid">{{item.mdep}}</option>
								</select>
							</td>
							<td><input type="text" class="form-control" v-model="rowtemplate.record" /></td>
							<td><button type="button" class="btn btn-primary" v-on:click="Save">保存</button></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="center">
				<el-pagination :current-page="current" @size-change="handleSizeChange" @current-change="handleCurrentChange"
				 :page-sizes="[10,20,30]" :page-size="pageSize" :pager-count="11" layout="total, sizes, prev, pager, next, jumper"
				 :total="pageCount">
				</el-pagination>
			</div>
		</div>
		<script src="js/vue.min.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript">
			//ViewModel
			var vue = new Vue({
				el: '#app',
				data: {
					rowtemplate: {
						id: 0,
						name: '',
						age: '',
						sex: '',
						mid: {},
						record: ''
					},
					dataList: {},
					memList: [],
					pageSize: 10,
					pageCount: 100,
					current: 0,
					isShow: false,
					//条件区的select
					selectVal: '',
					//条件区的name
					formName: '',
					formAgeOne: '',
					formAgeTwo: ''
				},
				mounted: function() {
					this.getStudentList();
					this.getMemList();
				},
				methods: {
					Save: function(event) {
						console.log()
						if (this.rowtemplate.id == 0) {
							//设置当前新增行的Id
							ajax({
								url: "http://localhost:8080/student/add", //请求地址
								data: this.rowtemplate,
								success: function(result) { //服务器返回的结果
									if (result.code == 0) {
										alert(result.msg);
									} else {
										alert("成功");
										window.location.reload();
									}
								}
							})
						} else {
							ajax({
								url: "http://localhost:8080/student/update", //请求地址
								data: this.rowtemplate,
								success: function(result) { //服务器返回的结果
									alert("成功");
									window.location.href = "";
								}
							})
						}

					},
					Delete: function(id) {
						var result = confirm('您确认删除吗？');
						ajax({
							url: "http://localhost:8080/student/delete", //请求地址
							data: { //需要携带的参数
								//token: ""
								id: parseInt(id)
							},
							success: function(result) { //服务器返回的结果
								/* alert("成功"); */
								window.location.href = "";
							}
						})
					},
					Edit: function(row) {
						this.rowtemplate = row;
						this.isShow = true;
						this.rowtemplate = {
							id: row.id,
							name: row.name,
							age: row.age,
							sex: row.sex,
							mid: row.m.mdep,
							remark: row.remark
						}
						console.log(this.rowtemplate);
					},
					getStudentList: function() {
						ajax({
							url: "http://localhost:8080/student/selectByPage", //请求地址
							dataType: "jsonp",
							data: { //需要携带的参数
								current: this.current,
								size: this.pageSize,
								name: this.formName,
								mid: this.selectVal,
								ageOne: this.formAgeOne,
								ageTwo: this.formAgeTwo
							},
							success: function(result) { //服务器返回的结果
								vue.dataList = result.records; //将结果赋值给 msg
								vue.pageCount = result.total;
								vue.current = result.current;
							}
						})
					},
					getMemList: function() {
						ajax({
							url: "http://localhost:8080/membership/selectMemByPage", //请求地址
							data: { //需要携带的参数
								//token: "db34b40d-2c35-4546-a864-2e5489c1b04d"

							},
							success: function(result) { //服务器返回的结果
								vue.memList = result.records; //将结果赋值给 memList
							}
						})
					},
					handleSizeChange(val) {
						console.log(`每页 ${val} 条`);
						this.pageSize = val;
						this.getStudentList();
					},
					handleCurrentChange(val) {
						this.current = val;
						this.getStudentList();
					},
					clear() {
						this.rowtemplate = {
							id: 0,
							name: '',
							age: '',
							mid: '',
							record: ''
						}
						this.isShow = true;
					},
					getStuIn(){
						
					}
				}
			});
		</script>
	</body>
</html>
